<template>
  <div class='xinpin'>
    <div v-for='(item,index) in xinpin' :key='index'>
      <div class="bg" :style="{backgroundImage:'url('+item.pho+')'}">
        <span>{{item.logo}}</span>
      </div>
      <div class="txt">{{item.txt}}</div>
      <div class="bottom">
        <div class="money">
          <span class="point">￥</span>
          <span class="number">{{item.money}}</span>
          起
        </div>
        <div class="day">{{item.day}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Xinpin',
  data () {
    return {
      xinpin: [
        {
          pho: '/static/Sousuo/Xinpin1.jpg',
          logo: '跟团游 | 北京出发',
          txt: '[游侠宝贝·秋收节·全家总动员]国庆火热报名中，名额有限！自然教育，水稻知识学习，水稻收割，稻草人diy，亲近自然，学会尊重劳动、热爱生活，爱惜粮食（可两位家长免费陪同）',
          money: '348',
          day: '1天'
        },
        {
          pho: '/static/Sousuo/Xinpin2.jpg',
          logo: '跟团游 | 全国各地出行',
          txt: '[双岛骑行·长兴+横沙]8-10月，双岛骑行50km，疾速海浪追风，滨海大桥/林荫道/江第一滩/田风车穿行，一天时间足不出沪，玩转两岛，金秋聚圆！',
          money: '170',
          day: '2天1晚'
        },
        {
          pho: '/static/Sousuo/Xinpin3.jpg',
          logo: '跟团游 | 成都出发',
          txt: '[游侠宝贝·秋收节·全家总动员]国庆火热报名中，名额有限！自然教育，水稻知识学习，水稻收割，稻草人diy，亲近自然，学会尊重劳动、热爱生活，爱惜粮食（可两位家长免费陪同）',
          money: '388',
          day: '1天'
        },
        {
          pho: '/static/Sousuo/Xinpin4.jpg',
          logo: '跟团游 | 北京出发',
          txt: '[游侠宝贝·秋收节·全家总动员]国庆火热报名中，名额有限！自然教育，水稻知识学习，水稻收割，稻草人diy，亲近自然，学会尊重劳动、热爱生活，爱惜粮食（可两位家长免费陪同）',
          money: '458',
          day: '1天'
        }
      ]
    }
  }
}
</script>
<style scoped lang='less'>
.xinpin{
  padding:15px;
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  &>div{
    width: 49%;
    margin-bottom:10px;
    .bg{
      width: 100%;
      height: 100px;
      border-radius:5px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      text-align: left;
      &>span{
        background-color: rgba(0,0,0,.5);
        color:#fff;
        border-radius:0 10px 10px 0;
        position: relative;
        top:8px;
        text-align:left;
        padding: 3px 10px 3px 5px;
        font-size:10px;
      }
    }
    .txt{
      margin-top:5px;
      font-size:16px;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .bottom{
      margin-top:10px;
      display: flex;
      justify-content:space-between;
      &>.money{
        color:#999;
        &>span{
          color:#ff7100;
        }
        .number{
          font-weight:bold;
          font-size: 16px;
        }

      }
      &>.day{
        color:#999;
      }
    }
  }
}
</style>
